<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>三级菜单</h1>
    <h1>   必知必会  </h1>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: content-box;
        }

        .root-box{
            width: 1000px;
            position:fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid red;
        }
        .root-box li{
            /* 注意:  这里不能用 宽度百分比 */
            width: 200px;
            float: left;
            height: 60px;
            background: lightblue;
            line-height: 60px;
            text-align: center;
            position: relative;
            transition: 0.3s;
        }
        
        /*   首先先把第二级菜单隐藏掉    */
        .root-box ul ul {
            /* display: none; */
        }
        /*   鼠标放在 ul 下面的 li 上, ul 显示 */
        .root-box ul li:hover > ul{
            display: block;
        }
        .root-box ul ul ul{
            margin-left: 100%;
            position: absolute;
            top: 0;
        }
        li:hover{
            background: darkgray !important;
            cursor: pointer;
        }
    </style>
    <div class="root-box">
        <ul>
            <li>一级菜单01</li>
            <li>一级菜单02</li>
            <li>
                打开二级菜单 >
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>
                        打开三级菜单 > 
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>一级菜单04</li>
            <li>一级菜单05</li>
        </ul>
    </div>



    
    	
  <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   

    必知必会

        <div class="root-box">
            <ul>
                <li>一级菜单01</li>
                <li>一级菜单02</li>
                <li>
                    打开二级菜单 > 
                    <ul>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>
                            打开三级菜单 > 
                            <ul>
                                <li>三级菜单</li>
                                <li>三级菜单</li>
                                <li>三级菜单</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>一级菜单04</li>
                <li>一级菜单05</li>
            </ul>
        </div>
        .root-box{
            width: 1000px;
            position:fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: linen;
        }
        .root-box li{
            width: 200px;            =>  1.注意:  这里不能用 宽度百分比
            float: left;
            height: 60px;            =>  限定高度
            line-height: 60px;
            background: lightgrey;
            text-align: center;
            position: relative;
            transition: 0.3s;
        }
        
        .root-box ul ul {
            display: none;            =>  2.首先先把第二级菜单隐藏掉 (同时隐藏第三级)
        }

        .root-box ul li:hover > ul{         =>  3.鼠标放在 ul 下面的 li 上, ul 显示
            display: block;
        }
        .root-box ul ul ul{
            margin-left: 100%;             => 左移动 100% 
            position: absolute;       => 上移动 
            top: 0;
        }
    </xmp>



    <p style="height: 123px;">123</p>
    <p style="height: 123px;">123</p>
    <p style="height: 123px;">123</p>
</body>

</html>